<template>
  <!--遮罩层-->
  <div class="window-overlay" style="display: block">
    <!--弹出式窗口-->
    <div class="popup" v-if="card && list">
      <!-- 头部 -->
      <div class="popup-header">
        <div class="popup-title">
          <div class="popup-title-icon">
            <span class="icon icon-card"></span>
          </div>
          <div class="popup-title-text">
            <textarea
              class="form-field-input"
              v-model="card.name"
              @blur="editCardName"
            ></textarea>
          </div>
          <div class="popup-title-detail">在列表 {{ list.name }} 中</div>
        </div>
        <a class="popup-header-close" @click="$router.back()"
          ><i class="icon icon-close"></i
        ></a>
      </div>

      <!--描述-->
      <div class="popup-content">
        <div class="window-module">
          <div class="title">
            <div class="title-icon">
              <span class="icon icon-description"></span>
            </div>
            <div class="title-text">
              <h3>描述</h3>
              <button class="btn btn-edit" @click="showEdit">编辑</button>
            </div>
          </div>

          <p class="description">
            <textarea
              ref="description"
              class="form-field-input"
              @blur="editDescription"
              v-model="card.description"
            ></textarea>
          </p>
        </div>

        <!--附件-->
        <div class="window-module">
          <div class="title">
            <div class="title-icon"><i class="icon icon-attachment"></i></div>
            <div class="title-text"><h3>附件</h3></div>
          </div>

          <ul class="attachments" v-if="Array.isArray(card.attachments)">
            <li
              class="attachment"
              v-for="attachment of card.attachments"
              :key="attachment.id"
            >
              <div
                class="attachment-thumbnail"
                :style="`background-image: url(${staticServer}${attachment.path})`"
              ></div>
              <p class="attachment-detail">
                <span class="attachment-thumbnail-name"
                  ><strong>{{ attachment.detail.name }}</strong></span
                >
                <span class="attachment-thumbnail-descriptions">
                  <span class="datetime">{{
                    attachment.createdAt | formatTime
                  }}</span>
                  <span>-</span>
                  <u @click="removeAttachment(attachment.id)">删除</u>
                </span>
                <span class="attachment-thumbnail-operation">
                  <i class="icon icon-card-cover"></i>
                  <u
                    v-if="attachment.isCover"
                    @click="removeCover(attachment.id)"
                    >移除封面</u
                  >
                  <u v-else @click="setCover(attachment.id)">设为封面</u>
                </span>
              </p>
            </li>
          </ul>

          <!-- 上传附件 -->
          <div>
            <button class="btn btn-edit" @click="$refs.attachment.click()">
              添加附件
            </button>
            <input
              type="file"
              ref="attachment"
              style="display: none"
              @change="uploadAttachment"
            />
          </div>
        </div>

        <!--活动-->
        <div class="window-module">
          <div class="title">
            <div class="title-icon"><i class="icon icon-activity"></i></div>
            <div class="title-text"><h3>评论</h3></div>
          </div>

          <!-- 评论列表 -->
          <Comment :cardId="card.id"></Comment>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import dateTime from "../utils/dataTime";
import Comment from "@/components/Comment/comment";
export default {
  name: "CardPage",

  components: { Comment },

  /**
   * 	过滤器， 使用moment格式化时间
   */
  filters: {
    formatTime: dateTime,
  },

  computed: {
    staticServer() {
      return this.$store.state.staticServer;
    },

    list() {
      return this.$store.getters["list/getterList"](this.$route.params.listId);
    },

    card() {
      return this.$store.getters["card/getterCard"](this.$route.params.cardId);
    },
  },

  methods: {
    /**
     * 	关闭卡片，回退到面板页
     */
    closeCard() {
      this.$router.push({ name: "Board", params: { id: this.$route.id } });
    },

    /**
     * 	修改卡片名称
     */
    editCardName() {
      try {
        this.$store.dispatch("card/putCard", {
          id: this.card.id,
          name: this.card.name,
        });
        this.$message.success("修改卡片名称成功");
      } catch (error) {
        console.log(error);
      }
    },

    showEdit() {
      this.$refs.description.focus();
    },

    /**
     * 	修改描述内容
     */
    editDescription() {
      try {
        this.$store.dispatch("card/putCard", {
          id: this.card.id,
          description: this.card.description,
        });
        this.$message.success("修改描述成功");
      } catch (error) {
        console.log(error);
      }
    },

    /**
     * 	上传附件
     */
    uploadAttachment() {
      let file = this.$refs.attachment.files[0];

      try {
        //	上传完之后把它的值清空

        this.$store.dispatch("card/uploadAttachment", {
          boardListCardId: this.card.id,
          file,
        });
        this.$refs.attachment.value = "";
        this.$message.success("附件上传成功");
      } catch (error) {
        console.log(error);
      }
    },

    /**
     * 	将附件设置为封面
     *
     */
    setCover(attachmentId) {
      try {
        this.$store.dispatch("card/setCover", {
          cardId: this.card.id,
          id: attachmentId,
        });
        this.$message.success("封面设置成功");
      } catch (error) {
        console.log(error);
      }
    },

    /**
     * 	将当前附件取消设置封面
     *
     */
    removeCover(attachmentId) {
      try {
        this.$store.dispatch("card/removeCover", {
          cardId: this.card.id,
          id: attachmentId,
        });
        this.$message.success("封面取消成功");
      } catch (error) {
        console.log(error);
      }
    },

    /**
     * 	删除附件
     *
     */
    removeAttachment(attachmentId) {
      try {
        this.$store.dispatch("card/removeAttachment", {
          cardId: this.card.id,
          id: attachmentId,
        });
        this.$message.success("附件移除成功");
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style></style>
